<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能家居控制中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'gray-light': '#F2F3F5',
                        'gray-medium': '#C9CDD4',
                        'gray-dark': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .device-card {
                @apply bg-white rounded-xl shadow-md p-5 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 cursor-pointer;
            }
            .device-icon {
                @apply w-14 h-14 rounded-full flex items-center justify-center mb-3;
            }
            .toggle-switch {
                @apply relative inline-block w-12 h-6 cursor-pointer;
            }
            .toggle-slider {
                @apply absolute inset-0 bg-gray-medium rounded-full transition-all duration-300;
            }
            .toggle-slider:before {
                @apply absolute content-[''] h-5 w-5 left-0.5 bottom-0.5 bg-white rounded-full transition-all duration-300;
            }
            .toggle-input:checked + .toggle-slider {
                @apply bg-primary;
            }
            .toggle-input:checked + .toggle-slider:before {
                @apply transform translate-x-6;
            }
            .btn-primary {
                @apply bg-primary text-white py-3 px-6 rounded-lg shadow-md hover:bg-primary/90 transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer;
            }
            .btn-secondary {
                @apply bg-gray-light text-dark py-3 px-6 rounded-lg shadow-md hover:bg-gray-200 transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer;
            }
            .message-bubble {
                @apply rounded-lg p-4 max-w-[80%] my-2 clear-both;
            }
            .message-user {
                @apply bg-primary text-white float-right rounded-tr-none;
            }
            .message-ai {
                @apply bg-gray-light text-dark float-left rounded-tl-none;
            }
            .nav-item {
                @apply flex items-center gap-3 py-3 px-4 rounded-lg hover:bg-gray-light cursor-pointer transition-colors;
            }
            .nav-item.active {
                @apply bg-primary/10 text-primary;
            }
            .modal {
                @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300;
            }
            .modal.active {
                @apply opacity-100 pointer-events-auto;
            }
            .modal-content {
                @apply bg-white rounded-xl shadow-lg max-w-md w-full mx-4 transform transition-transform duration-300 scale-95 opacity-0;
            }
            .modal.active .modal-content {
                @apply scale-100 opacity-100;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center gap-3">
                <i class="fa fa-home text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">智能家居控制中心</h1>
            </div>
            <div class="flex items-center gap-4">
                <button class="text-gray-dark hover:text-primary transition-colors relative" onclick="toggleNotifications()">
                    <i class="fa fa-bell-o text-xl"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
                </button>
                <button class="text-gray-dark hover:text-primary transition-colors" onclick="toggleSettings()">
                    <i class="fa fa-cog text-xl"></i>
                </button>
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary cursor-pointer" onclick="toggleUserMenu()">
                    <i class="fa fa-user"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
        <!-- 左侧导航 -->
        <aside class="lg:w-1/6 hidden lg:block">
            <nav class="bg-white rounded-xl shadow-sm p-4">
                <div class="nav-item active">
                    <i class="fa fa-th-large"></i>
                    <span>控制面板</span>
                </div>
                <div class="nav-item">
                    <i class="fa fa-line-chart"></i>
                    <span>能源统计</span>
                </div>
                <div class="nav-item">
                    <i class="fa fa-calendar"></i>
                    <span>定时任务</span>
                </div>
                <div class="nav-item">
                    <i class="fa fa-shield"></i>
                    <span>安全中心</span>
                </div>
                <div class="nav-item">
                    <i class="fa fa-users"></i>
                    <span>家庭成员</span>
                </div>
                <div class="nav-item">
                    <i class="fa fa-history"></i>
                    <span>操作记录</span>
                </div>
            </nav>
        </aside>

        <!-- 中间设备控制区 -->
        <section class="lg:w-4/6">
            <div class="mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-dark">设备控制</h2>
                    <div class="flex gap-2">
                        <button class="btn-secondary text-sm py-2 px-4">
                            <i class="fa fa-refresh"></i>
                            <span>刷新</span>
                        </button>
                        <button class="btn-secondary text-sm py-2 px-4">
                            <i class="fa fa-plus"></i>
                            <span>添加设备</span>
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- 灯泡控制 -->
                    <div class="device-card" id="light-device" onclick="toggleDevice('light')">
                        <div class="device-icon bg-primary/10 text-primary">
                            <i class="fa fa-lightbulb-o text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">客厅灯光</h3>
                        <p class="text-gray-dark text-sm mb-4">控制客厅主灯开关</p>
                        <div class="flex justify-between items-center">
                            <span id="light-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input type="checkbox" id="light-toggle" class="toggle-input" onchange="toggleDevice('light')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>

                    <!-- 空调控制 -->
                    <div class="device-card" id="ac-device" onclick="toggleDevice('ac')">
                        <div class="device-icon bg-secondary/10 text-secondary">
                            <i class="fa fa-snowflake-o text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">卧室空调</h3>
                        <p class="text-gray-dark text-sm mb-4">控制卧室空调开关和温度</p>
                        <div class="flex justify-between items-center">
                            <div>
                                <span id="ac-status" class="text-success font-medium">已关闭</span>
                                <span id="ac-temperature" class="ml-2 text-gray-dark">--°C</span>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="ac-toggle" class="toggle-input" onchange="toggleDevice('ac')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        <div id="ac-controls" class="mt-4 hidden">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-sm text-gray-dark">温度调节</span>
                                <span id="current-temp" class="font-medium">24°C</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="w-10 h-10 rounded-full bg-gray-light flex items-center justify-center text-dark hover:bg-gray-200 transition-colors" onclick="adjustTemperature('ac', -1)">
                                    <i class="fa fa-minus"></i>
                                </button>
                                <button class="w-10 h-10 rounded-full bg-gray-light flex items-center justify-center text-dark hover:bg-gray-200 transition-colors" onclick="adjustTemperature('ac', 1)">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                            <div class="mt-3">
                                <div class="flex justify-between text-xs text-gray-dark mb-1">
                                    <span>制冷</span>
                                    <span>制热</span>
                                </div>
                                <div class="flex gap-2">
                                    <button class="flex-1 py-2 bg-primary/10 text-primary rounded-md hover:bg-primary/20 transition-colors">
                                        <i class="fa fa-snowflake-o mr-1"></i> 制冷
                                    </button>
                                    <button class="flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors">
                                        <i class="fa fa-sun-o mr-1"></i> 制热
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 窗帘控制 -->
                    <div class="device-card" id="curtain-device" onclick="toggleDevice('curtain')">
                        <div class="device-icon bg-warning/10 text-warning">
                            <i class="fa fa-columns text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">客厅窗帘</h3>
                        <p class="text-gray-dark text-sm mb-4">控制客厅窗帘开关</p>
                        <div class="flex justify-between items-center">
                            <span id="curtain-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input type="checkbox" id="curtain-toggle" class="toggle-input" onchange="toggleDevice('curtain')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        <div id="curtain-controls" class="mt-4 hidden">
                            <div class="flex justify-between text-sm mb-1">
                                <span>关闭</span>
                                <span>半开</span>
                                <span>全开</span>
                            </div>
                            <div class="flex gap-2">
                                <button class="flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors" onclick="setCurtainLevel(0)">
                                    <i class="fa fa-angle-double-left mr-1"></i> 全关
                                </button>
                                <button class="flex-1 py-2 bg-primary/10 text-primary rounded-md hover:bg-primary/20 transition-colors" onclick="setCurtainLevel(50)">
                                    <i class="fa fa-arrows-h mr-1"></i> 半开
                                </button>
                                <button class="flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors" onclick="setCurtainLevel(100)">
                                    <i class="fa fa-angle-double-right mr-1"></i> 全开
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 电视控制 -->
                    <div class="device-card" id="tv-device" onclick="toggleDevice('tv')">
                        <div class="device-icon bg-danger/10 text-danger">
                            <i class="fa fa-television text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">客厅电视</h3>
                        <p class="text-gray-dark text-sm mb-4">控制客厅电视开关</p>
                        <div class="flex justify-between items-center">
                            <span id="tv-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input type="checkbox" id="tv-toggle" class="toggle-input" onchange="toggleDevice('tv')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        <div id="tv-controls" class="mt-4 hidden">
                            <div class="grid grid-cols-3 gap-2 mb-2">
                                <button class="w-full h-10 rounded-md bg-gray-light flex items-center justify-center text-dark hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-volume-up"></i>
                                </button>
                                <button class="w-full h-10 rounded-md bg-primary/10 flex items-center justify-center text-primary hover:bg-primary/20 transition-colors">
                                    <i class="fa fa-pause"></i>
                                </button>
                                <button class="w-full h-10 rounded-md bg-gray-light flex items-center justify-center text-dark hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-volume-down"></i>
                                </button>
                            </div>
                            <div class="flex gap-2">
                                <button class="flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-step-backward mr-1"></i> 上一个
                                </button>
                                <button class="flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-step-forward mr-1"></i> 下一个
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 加湿器控制 -->
                    <div class="device-card" id="humidifier-device" onclick="toggleDevice('humidifier')">
                        <div class="device-icon bg-primary/10 text-primary">
                            <i class="fa fa-tint text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">书房加湿器</h3>
                        <p class="text-gray-dark text-sm mb-4">控制书房加湿器开关</p>
                        <div class="flex justify-between items-center">
                            <span id="humidifier-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input type="checkbox" id="humidifier-toggle" class="toggle-input" onchange="toggleDevice('humidifier')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        <div id="humidifier-controls" class="mt-4 hidden">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-sm text-gray-dark">湿度设置</span>
                                <span id="humidity-level" class="font-medium">50%</span>
                            </div>
                            <input type="range" min="30" max="80" value="50" class="w-full h-2 bg-gray-light rounded-lg appearance-none cursor-pointer" id="humidity-slider" oninput="setHumidityLevel(this.value)">
                            <div class="flex justify-between text-xs text-gray-dark mt-1">
                                <span>30%</span>
                                <span>50%</span>
                                <span>80%</span>
                            </div>
                        </div>
                    </div>

                    <!-- 扫地机器人控制 -->
                    <div class="device-card" id="vacuum-device" onclick="toggleDevice('vacuum')">
                        <div class="device-icon bg-secondary/10 text-secondary">
                            <i class="fa fa-random text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-1">扫地机器人</h3>
                        <p class="text-gray-dark text-sm mb-4">控制扫地机器人开关</p>
                        <div class="flex justify-between items-center">
                            <span id="vacuum-status" class="text-success font-medium">已关闭</span>
                            <label class="toggle-switch">
                                <input type="checkbox" id="vacuum-toggle" class="toggle-input" onchange="toggleDevice('vacuum')">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        <div id="vacuum-controls" class="mt-4 hidden">
                            <div class="flex gap-2 mb-2">
                                <button class="flex-1 py-2 bg-primary/10 text-primary rounded-md hover:bg-primary/20 transition-colors">
                                    <i class="fa fa-refresh mr-1"></i> 自动清扫
                                </button>
                                <button class="flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-stop mr-1"></i> 停止
                                </button>
                            </div>
                            <div class="flex gap-2">
                                <button class="flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-home mr-1"></i> 回充
                                </button>
                                <button class="flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-battery-half mr-1"></i> 电量
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 场景模式 -->
            <div>
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-dark">场景模式</h2>
                    <button class="btn-secondary text-sm py-2 px-4">
                        <i class="fa fa-plus"></i>
                        <span>添加场景</span>
                    </button>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                    <button class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-1" onclick="activateScene('home')">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2 mx-auto">
                            <i class="fa fa-home text-xl"></i>
                        </div>
                        <p class="font-medium text-center">回家模式</p>
                    </button>
                    <button class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-1" onclick="activateScene('sleep')">
                        <div class="w-12 h-12 rounded-full bg-dark/10 flex items-center justify-center text-dark mb-2 mx-auto">
                            <i class="fa fa-moon-o text-xl"></i>
                        </div>
                        <p class="font-medium text-center">睡眠模式</p>
                    </button>
                    <button class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-1" onclick="activateScene('movie')">
                        <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center text-danger mb-2 mx-auto">
                            <i class="fa fa-film text-xl"></i>
                        </div>
                        <p class="font-medium text-center">影院模式</p>
                    </button>
                    <button class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-1" onclick="activateScene('away')">
                        <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning mb-2 mx-auto">
                            <i class="fa fa-suitcase text-xl"></i>
                        </div>
                        <p class="font-medium text-center">离家模式</p>
                    </button>
                </div>
            </div>

            <!-- 能源统计 -->
            <div class="mt-6">
                <h2 class="text-xl font-bold text-dark mb-4">能源统计</h2>
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-medium">本月用电情况</h3>
                        <div class="flex gap-2">
                            <button class="text-xs py-1 px-3 bg-primary/10 text-primary rounded-full">日</button>
                            <button class="text-xs py-1 px-3 bg-gray-light text-gray-dark rounded-full">周</button>
                            <button class="text-xs py-1 px-3 bg-gray-light text-gray-dark rounded-full">月</button>
                        </div>
                    </div>
                    <div class="h-64">
                        <!-- 这里会显示图表，使用纯HTML/CSS模拟 -->
                        <div class="w-full h-full flex items-end justify-between gap-2">
                            <div class="flex-1 relative">
                                <div class="absolute bottom-0 w-full h-[30%] bg-primary/30 rounded-t"></div>
                                <div class="absolute bottom-[30%] w-full text-center text-xs text-gray-dark">10</div>
                            </div>
                            <div class="flex-1 relative">
                                <div class="absolute bottom-0 w-full h-[45%] bg-primary/40 rounded-t"></div>
                                <div class="absolute bottom-[45%] w-full text-center text-xs text-gray-dark">15</div>
                            </div>
                            <div class="flex-1 relative">
                                <div class="absolute bottom-0 w-full h-[60%] bg-primary/50 rounded-t"></div>
                                <div class="absolute bottom-[60%] w-full text-center text-xs text-gray-dark">20</div>
                            </div>
                            <div class="flex-1 relative">
                                <div class="absolute bottom-0 w-full h-[40%] bg-primary/60 rounded-t"></div>
                                <div class="absolute bottom-[40%] w-full text-center text-xs text-gray-dark">13</div>
                            </div>
                            <div class="flex-1 relative">
                                <div class="absolute bottom-0 w-full h-[75%] bg-primary/70 rounded-t"></div>
                                <div class="absolute bottom-[75%] w-full text-center text-xs text-gray-dark">25</div>
                            </div>
                            <div class="flex-1 relative">
                                <div class="absolute bottom-0 w-full h-[55%] bg-primary/80 rounded-t"></div>
                                <div class="absolute bottom-[55%] w-full text-center text-xs text-gray-dark">18</div>
                            </div>
                            <div class="flex-1 relative">
                                <div class="absolute bottom-0 w-full h-[65%] bg-primary rounded-t"></div>
                                <div class="absolute bottom-[65%] w-full text-center text-xs text-gray-dark">22</div>
                            </div>
                        </div>
                        <div class="flex justify-between text-xs text-gray-dark mt-2">
                            <span>周一</span>
                            <span>周二</span>
                            <span>周三</span>
                            <span>周四</span>
                            <span>周五</span>
                            <span>周六</span>
                            <span>周日</span>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-4 mt-6">
                        <div class="text-center">
                            <p class="text-gray-dark text-sm">总用电量</p>
                            <p class="text-xl font-bold text-dark">123 kWh</p>
                        </div>
                        <div class="text-center">
                            <p class="text-gray-dark text-sm">同比上周</p>
                            <p class="text-xl font-bold text-success">-8%</p>
                        </div>
                        <div class="text-center">
                            <p class="text-gray-dark text-sm">预估费用</p>
                            <p class="text-xl font-bold text-dark">¥61.5</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 右侧语音控制和快捷操作区 -->
        <section class="lg:w-1/6">
            <!-- 语音控制 -->
            <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
                <h2 class="text-xl font-bold text-dark mb-4">语音控制</h2>
                <p class="text-gray-dark text-sm mb-4">对我说话，我可以帮你控制智能家居设备</p>
                
                <!-- 语音输入区 -->
                <div class="flex gap-3">
                    <input type="text" id="voice-input" placeholder="输入语音指令..." class="flex-grow py-3 px-4 rounded-lg border border-gray-medium focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
                    <button id="voice-button" class="btn-primary" onclick="startVoiceRecognition()">
                        <i class="fa fa-microphone"></i>
                        <span>按住说话</span>
                    </button>
                </div>
                
                <!-- 常用语音指令 -->
                <div class="mt-4">
                    <h3 class="text-sm font-medium text-gray-dark mb-2">常用指令</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <button class="text-xs py-2 px-3 bg-gray-light rounded-full hover:bg-gray-200 transition-colors" onclick="addVoiceCommand('打开客厅灯光')">
                            打开灯光
                        </button>
                        <button class="text-xs py-2 px-3 bg-gray-light rounded-full hover:bg-gray-200 transition-colors" onclick="addVoiceCommand('关闭卧室空调')">
                            关闭空调
                        </button>
                        <button class="text-xs py-2 px-3 bg-gray-light rounded-full hover:bg-gray-200 transition-colors" onclick="addVoiceCommand('将温度设置为26度')">
                            设置温度
                        </button>
                        <button class="text-xs py-2 px-3 bg-gray-light rounded-full hover:bg-gray-200 transition-colors" onclick="addVoiceCommand('打开睡眠模式')">
                            睡眠模式
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 快捷操作 -->
            <div class="bg-white rounded-xl shadow-sm p-5">
                <h2 class="text-xl font-bold text-dark mb-4">快捷操作</h2>
                
                <button class="w-full btn-primary mb-3" onclick="turnOffAllDevices()">
                    <i class="fa fa-power-off mr-2"></i>
                    <span>全部关闭</span>
                </button>
                
                <button class="w-full btn-secondary mb-3" onclick="toggleVacuum()">
                    <i class="fa fa-random mr-2"></i>
                    <span>开始清扫</span>
                </button>
                
                <button class="w-full btn-secondary" onclick="toggleSecurityMode()">
                    <i class="fa fa-shield mr-2"></i>
                    <span>开启安防模式</span>
                </button>
                
                <!-- 设备状态概览 -->
                <div class="mt-6">
                    <h3 class="text-sm font-medium text-gray-dark mb-2">设备状态概览</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">总设备数</span>
                            <span class="font-medium">6</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm">在线设备</span>
                            <span class="font-medium text-primary">2</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm">离线设备</span>
                            <span class="font-medium text-gray-dark">0</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm">运行中</span>
                            <span class="font-medium text-success">2</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部状态栏 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="text-gray-dark text-sm">
                <p>智能家居控制中心 v1.0</p>
            </div>
            <div class="flex gap-4">
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-question-circle"></i>
                </button>
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-bug"></i>
                </button>
            </div>
        </div>
    </footer>

    <!-- 通知模态框 -->
    <div id="notifications-modal" class="modal">
        <div class="modal-content">
            <div class="p-5 border-b border-gray-200 flex justify-between items-center">
                <h3 class="font-bold text-lg">通知中心</h3>
                <button onclick="closeModal('notifications-modal')" class="text-gray-dark hover:text-dark">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-5 max-h-[400px] overflow-y-auto">
                <div class="flex gap-3 mb-4 pb-4 border-b border-gray-100">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-bell-o"></i>
                    </div>
                    <div>
                        <p class="font-medium">扫地机器人已完成清扫</p>
                        <p class="text-xs text-gray-dark">10分钟前</p>
                    </div>
                </div>
                <div class="flex gap-3 mb-4 pb-4 border-b border-gray-100">
                    <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning">
                        <i class="fa fa-battery-quarter"></i>
                    </div>
                    <div>
                        <p class="font-medium">加湿器水量不足</p>
                        <p class="text-xs text-gray-dark">1小时前</p>
                    </div>
                </div>
                <div class="flex gap-3 mb-4 pb-4 border-b border-gray-100">
                    <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <div>
                        <p class="font-medium">检测到异常活动，请查看</p>
                        <p class="text-xs text-gray-dark">3小时前</p>
                    </div>
                </div>
                <div class="flex gap-3">
                    <div class="w-10 h-10 rounded-full bg-gray-light flex items-center justify-center text-gray-dark">
                        <i class="fa fa-info-circle"></i>
                    </div>
                    <div>
                        <p class="font-medium">系统更新可用</p>
                        <p class="text-xs text-gray-dark">昨天</p>
                    </div>
                </div>
            </div>
            <div class="p-5 border-t border-gray-200 flex justify-center">
                <button class="text-primary hover:text-primary/80 transition-colors">
                    查看全部通知
                </button>
            </div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div id="settings-modal" class="modal">
        <div class="modal-content">
            <div class="p-5 border-b border-gray-200 flex justify-between items-center">
                <h3 class="font-bold text-lg">设置</h3>
                <button onclick="closeModal('settings-modal')" class="text-gray-dark hover:text-dark">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-5">
                <div class="mb-4 pb-4 border-b border-gray-100">
                    <h4 class="font-medium mb-3">账户设置</h4>
                    <div class="flex justify-between items-center py-2">
                        <span>自动登录</span>
                        <label class="toggle-switch">
                            <input type="checkbox" checked class="toggle-input">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span>推送通知</span>
                        <label class="toggle-switch">
                            <input type="checkbox" checked class="toggle-input">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span>声音提醒</span>
                        <label class="toggle-switch">
                            <input type="checkbox" class="toggle-input">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                <div class="mb-4 pb-4 border-b border-gray-100">
                    <h4 class="font-medium mb-3">设备设置</h4>
                    <div class="flex justify-between items-center py-2">
                        <span>自动更新</span>
                        <label class="toggle-switch">
                            <input type="checkbox" checked class="toggle-input">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span>离家自动关闭</span>
                        <label class="toggle-switch">
                            <input type="checkbox" checked class="toggle-input">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span>夜间模式</span>
                        <label class="toggle-switch">
                            <input type="checkbox" class="toggle-input">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                <div>
                    <h4 class="font-medium mb-3">关于</h4>
                    <div class="flex justify-between items-center py-2">
                        <span>版本</span>
                        <span>1.0.0</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span>检查更新</span>
                        <button class="text-primary">检查</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户菜单模态框 -->
    <div id="user-menu-modal" class="modal">
        <div class="modal-content max-w-xs">
            <div class="p-5">
                <div class="flex gap-3 items-center mb-4">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-user text-xl"></i>
                    </div>
                    <div>
                        <p class="font-medium">智能家居用户</p>
                        <p class="text-xs text-gray-dark">smart-home@example.com</p>
                    </div>
                </div>
                <div class="space-y-1">
                    <button class="w-full text-left py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">
                        <i class="fa fa-user-o mr-2 text-gray-dark"></i>
                        个人资料
                    </button>
                    <button class="w-full text-left py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">
                        <i class="fa fa-bell-o mr-2 text-gray-dark"></i>
                        通知设置
                    </button>
                    <button class="w-full text-left py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">
                        <i class="fa fa-cog mr-2 text-gray-dark"></i>
                        账户设置
                    </button>
                    <button class="w-full text-left py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">
                        <i class="fa fa-question-circle-o mr-2 text-gray-dark"></i>
                        帮助中心
                    </button>
                    <button class="w-full text-left py-2 px-3 text-danger hover:bg-danger/10 rounded-lg transition-colors mt-2">
                        <i class="fa fa-sign-out mr-2"></i>
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 设备状态管理
        const devices = {
            light: { status: false, element: 'light' },
            ac: { status: false, temperature: 24, element: 'ac' },
            curtain: { status: false, element: 'curtain', level: 50 },
            tv: { status: false, element: 'tv' },
            humidifier: { status: false, element: 'humidifier', humidity: 50 },
            vacuum: { status: false, element: 'vacuum' }
        };

        // 切换设备状态
        function toggleDevice(deviceName) {
            const device = devices[deviceName];
            device.status = !device.status;
            
            // 更新UI
            updateDeviceUI(deviceName);
            
            // 添加语音反馈
            addMessage(device.status ? `已打开${getDeviceName(deviceName)}` : `已关闭${getDeviceName(deviceName)}`, 'ai');
        }

        // 更新设备UI显示
        function updateDeviceUI(deviceName) {
            const device = devices[deviceName];
            const statusElement = document.getElementById(`${deviceName}-status`);
            const toggleElement = document.getElementById(`${deviceName}-toggle`);
            
            // 更新开关状态
            toggleElement.checked = device.status;
            
            // 更新状态文本
            if (device.status) {
                statusElement.textContent = "已开启";
                statusElement.className = "text-primary font-medium";
            } else {
                statusElement.textContent = "已关闭";
                statusElement.className = "text-success font-medium";
            }
            
            // 特殊设备处理
            if (deviceName === 'ac') {
                const tempElement = document.getElementById('ac-temperature');
                const controlsElement = document.getElementById('ac-controls');
                
                if (device.status) {
                    tempElement.textContent = `${device.temperature}°C`;
                    controlsElement.classList.remove('hidden');
                } else {
                    tempElement.textContent = "--°C";
                    controlsElement.classList.add('hidden');
                }
            } else if (deviceName === 'curtain') {
                const controlsElement = document.getElementById('curtain-controls');
                
                if (device.status) {
                    controlsElement.classList.remove('hidden');
                } else {
                    controlsElement.classList.add('hidden');
                }
            } else if (deviceName === 'tv') {
                const controlsElement = document.getElementById('tv-controls');
                
                if (device.status) {
                    controlsElement.classList.remove('hidden');
                } else {
                    controlsElement.classList.add('hidden');
                }
            } else if (deviceName === 'humidifier') {
                const controlsElement = document.getElementById('humidifier-controls');
                const humidityLevel = document.getElementById('humidity-level');
                
                if (device.status) {
                    humidityLevel.textContent = `${device.humidity}%`;
                    controlsElement.classList.remove('hidden');
                } else {
                    controlsElement.classList.add('hidden');
                }
            } else if (deviceName === 'vacuum') {
                const controlsElement = document.getElementById('vacuum-controls');
                
                if (device.status) {
                    controlsElement.classList.remove('hidden');
                } else {
                    controlsElement.classList.add('hidden');
                }
            }
        }

        // 调节温度
        function adjustTemperature(deviceName, change) {
            if (deviceName === 'ac' && devices.ac.status) {
                // 温度范围限制在16-30度
                devices.ac.temperature = Math.max(16, Math.min(30, devices.ac.temperature + change));
                
                // 更新UI
                document.getElementById('ac-temperature').textContent = `${devices.ac.temperature}°C`;
                document.getElementById('current-temp').textContent = `${devices.ac.temperature}°C`;
                
                // 添加语音反馈
                addMessage(`已将${getDeviceName(deviceName)}温度调整为${devices.ac.temperature}度`, 'ai');
            }
        }

        // 设置窗帘开合度
        function setCurtainLevel(level) {
            if (devices.curtain.status) {
                devices.curtain.level = level;
                
                // 更新UI
                const buttons = document.querySelectorAll('#curtain-controls button');
                buttons.forEach((btn, index) => {
                    if (index === 0 && level === 0 || index === 1 && level === 50 || index === 2 && level === 100) {
                        btn.className = "flex-1 py-2 bg-primary/10 text-primary rounded-md hover:bg-primary/20 transition-colors";
                    } else {
                        btn.className = "flex-1 py-2 bg-gray-light text-gray-dark rounded-md hover:bg-gray-200 transition-colors";
                    }
                });
                
                // 添加语音反馈
                addMessage(`已将${getDeviceName('curtain')}调整为${level === 0 ? '关闭' : level === 100 ? '全开' : '半开'}状态`, 'ai');
            }
        }

        // 设置加湿器湿度
        function setHumidityLevel(level) {
            if (devices.humidifier.status) {
                devices.humidifier.humidity = parseInt(level);
                
                // 更新UI
                document.getElementById('humidity-level').textContent = `${level}%`;
                
                // 添加语音反馈
                addMessage(`已将${getDeviceName('humidifier')}湿度设置为${level}%`, 'ai');
            }
        }

        // 激活场景模式
        function activateScene(sceneName) {
            // 根据场景设置设备状态
            switch(sceneName) {
                case 'home':
                    devices.light.status = true;
                    devices.ac.status = true;
                    devices.curtain.status = true;
                    devices.tv.status = false;
                    devices.humidifier.status = false;
                    devices.vacuum.status = false;
                    addMessage("欢迎回家！已为你开启舒适的环境", 'ai');
                    break;
                case 'sleep':
                    devices.light.status = false;
                    devices.ac.status = true;
                    devices.ac.temperature = 26;
                    devices.curtain.status = false;
                    devices.tv.status = false;
                    devices.humidifier.status = true;
                    devices.humidifier.humidity = 55;
                    devices.vacuum.status = false;
                    addMessage("祝你有个好梦！已为你调整为睡眠模式", 'ai');
                    break;
                case 'movie':
                    devices.light.status = false;
                    devices.ac.status = true;
                    devices.ac.temperature = 24;
                    devices.curtain.status = false;
                    devices.tv.status = true;
                    devices.humidifier.status = false;
                    devices.vacuum.status = false;
                    addMessage("准备好享受电影了吗？已为你调整为影院模式", 'ai');
                    break;
                case 'away':
                    devices.light.status = false;
                    devices.ac.status = false;
                    devices.curtain.status = false;
                    devices.tv.status = false;
                    devices.humidifier.status = false;
                    devices.vacuum.status = false;
                    addMessage("出门注意安全！已为你关闭所有设备", 'ai');
                    break;
            }
            
            // 更新所有设备UI
            for (const deviceName in devices) {
                updateDeviceUI(deviceName);
            }
        }

        // 获取设备中文名
        function getDeviceName(deviceName) {
            const names = {
                light: "客厅灯光",
                ac: "卧室空调",
                curtain: "客厅窗帘",
                tv: "客厅电视",
                humidifier: "书房加湿器",
                vacuum: "扫地机器人"
            };
            return names[deviceName] || deviceName;
        }

        // 添加消息到聊天界面
        function addMessage(text, sender) {
            const messagesElement = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message-bubble message-${sender}`;
            messageDiv.innerHTML = `<p>${text}</p>`;
            messagesElement.appendChild(messageDiv);
            
            // 滚动到底部
            messagesElement.scrollTop = messagesElement.scrollHeight;
        }

        // 语音识别
        function startVoiceRecognition() {
            // 检查浏览器支持
            if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
                addMessage("抱歉，你的浏览器不支持语音识别功能", 'ai');
                return;
            }
            
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            const recognition = new SpeechRecognition();
            
            // 配置识别参数
            recognition.lang = 'zh-CN';
            recognition.interimResults = false;
            
            // 显示正在监听
            addMessage("正在聆听...", 'user');
            
            // 识别结果处理
            recognition.onresult = function(event) {
                const speechResult = event.results[0][0].transcript.toLowerCase();
                addMessage(speechResult, 'user');
                
                // 处理语音指令
                processVoiceCommand(speechResult);
            };
            
            // 识别结束
            recognition.onend = function() {
                // 可以在这里添加结束监听的UI反馈
            };
            
            // 识别错误
            recognition.onerror = function(event) {
                addMessage(`语音识别错误: ${event.error}`, 'ai');
            };
            
            // 开始识别
            recognition.start();
        }

        // 添加预设语音指令
        function addVoiceCommand(command) {
            document.getElementById('voice-input').value = command;
            processVoiceCommand(command);
            addMessage(command, 'user');
        }

        // 处理语音指令
        function processVoiceCommand(command) {
            // 简单的命令匹配逻辑
            if (command.includes('打开')) {
                if (command.includes('灯')) {
                    devices.light.status = true;
                    updateDeviceUI('light');
                    addMessage("已为你打开客厅灯光", 'ai');
                } else if (command.includes('空调')) {
                    devices.ac.status = true;
                    updateDeviceUI('ac');
                    addMessage("已为你打开卧室空调", 'ai');
                } else if (command.includes('窗帘')) {
                    devices.curtain.status = true;
                    updateDeviceUI('curtain');
                    addMessage("已为你打开客厅窗帘", 'ai');
                } else if (command.includes('电视')) {
                    devices.tv.status = true;
                    updateDeviceUI('tv');
                    addMessage("已为你打开客厅电视", 'ai');
                } else if (command.includes('加湿器')) {
                    devices.humidifier.status = true;
                    updateDeviceUI('humidifier');
                    addMessage("已为你打开书房加湿器", 'ai');
                } else if (command.includes('扫地机器人')) {
                    devices.vacuum.status = true;
                    updateDeviceUI('vacuum');
                    addMessage("已为你启动扫地机器人", 'ai');
                }
            } else if (command.includes('关闭')) {
                if (command.includes('灯')) {
                    devices.light.status = false;
                    updateDeviceUI('light');
                    addMessage("已为你关闭客厅灯光", 'ai');
                } else if (command.includes('空调')) {
                    devices.ac.status = false;
                    updateDeviceUI('ac');
                    addMessage("已为你关闭卧室空调", 'ai');
                } else if (command.includes('窗帘')) {
                    devices.curtain.status = false;
                    updateDeviceUI('curtain');
                    addMessage("已为你关闭客厅窗帘", 'ai');
                } else if (command.includes('电视')) {
                    devices.tv.status = false;
                    updateDeviceUI('tv');
                    addMessage("已为你关闭客厅电视", 'ai');
                } else if (command.includes('加湿器')) {
                    devices.humidifier.status = false;
                    updateDeviceUI('humidifier');
                    addMessage("已为你关闭书房加湿器", 'ai');
                } else if (command.includes('扫地机器人')) {
                    devices.vacuum.status = false;
                    updateDeviceUI('vacuum');
                    addMessage("已为你关闭扫地机器人", 'ai');
                }
            } else if (command.includes('温度')) {
                // 提取温度值
                const match = command.match(/(\d+)/);
                if (match && match[1]) {
                    const temp = parseInt(match[1]);
                    if (temp >= 16 && temp <= 30) {
                        devices.ac.status = true;
                        devices.ac.temperature = temp;
                        updateDeviceUI('ac');
                        addMessage(`已为你将卧室空调温度设置为${temp}度`, 'ai');
                    } else {
                        addMessage("温度设置范围为16-30度，请重新设置", 'ai');
                    }
                }
            } else if (command.includes('窗帘')) {
                if (command.includes('全开') || command.includes('打开')) {
                    devices.curtain.status = true;
                    setCurtainLevel(100);
                } else if (command.includes('半开')) {
                    devices.curtain.status = true;
                    setCurtainLevel(50);
                } else if (command.includes('关闭')) {
                    devices.curtain.status = true;
                    setCurtainLevel(0);
                }
                updateDeviceUI('curtain');
            } else if (command.includes('湿度')) {
                // 提取湿度值
                const match = command.match(/(\d+)/);
                if (match && match[1]) {
                    const humidity = parseInt(match[1]);
                    if (humidity >= 30 && humidity <= 80) {
                        devices.humidifier.status = true;
                        devices.humidifier.humidity = humidity;
                        updateDeviceUI('humidifier');
                        addMessage(`已为你将书房加湿器湿度设置为${humidity}%`, 'ai');
                    } else {
                        addMessage("湿度设置范围为30-80%，请重新设置", 'ai');
                    }
                }
            } else if (command.includes('回家')) {
                activateScene('home');
            } else if (command.includes('睡觉') || command.includes('睡眠')) {
                activateScene('sleep');
            } else if (command.includes('电影') || command.includes('影院')) {
                activateScene('movie');
            } else if (command.includes('离家') || command.includes('出门')) {
                activateScene('away');
            } else {
                addMessage("抱歉，我不理解这个指令，请换一种说法", 'ai');
            }
        }

        // 关闭所有设备
        function turnOffAllDevices() {
            for (const deviceName in devices) {
                devices[deviceName].status = false;
                updateDeviceUI(deviceName);
            }
            addMessage("已关闭所有设备", 'ai');
        }

        // 切换扫地机器人
        function toggleVacuum() {
            devices.vacuum.status = !devices.vacuum.status;
            updateDeviceUI('vacuum');
            addMessage(devices.vacuum.status ? "已启动扫地机器人" : "已停止扫地机器人", 'ai');
        }

        // 切换安防模式
        function toggleSecurityMode() {
            // 模拟安防模式切换
            const isEnabled = Math.random() > 0.5;
            addMessage(isEnabled ? "安防模式已开启" : "安防模式已关闭", 'ai');
        }

        // 打开通知模态框
        function toggleNotifications() {
            document.getElementById('notifications-modal').classList.toggle('active');
        }

        // 打开设置模态框
        function toggleSettings() {
            document.getElementById('settings-modal').classList.toggle('active');
        }

        // 打开用户菜单模态框
        function toggleUserMenu() {
            document.getElementById('user-menu-modal').classList.toggle('active');
        }

        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('active');
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化所有设备状态
            for (const deviceName in devices) {
                updateDeviceUI(deviceName);
            }
            
            // 点击模态框外部关闭模态框
            document.querySelectorAll('.modal').forEach(modal => {
                modal.addEventListener('click', function(e) {
                    if (e.target === modal) {
                        modal.classList.remove('active');
                    }
                });
            });
        });
    </script>
</body>
</html>
    